<script setup lang='ts'>
import {ref, effect, CSSProperties, computed} from 'vue'
import {pdfProps, pageSizeHash} from './dPdfPreview'
import {getPdfDataUrl} from '@/util/pdf'
import { ElMessage } from 'element-plus'
const props = defineProps(pdfProps)
//获取样式
const getStyle = () => {
  const style:CSSProperties = {}
  if (props.width && props.height) {
    style.width = props.width
    style.height = props.height
  } else {
    const pageSize = pageSizeHash[props.size] ? pageSizeHash[props.size] : pageSizeHash['A4']
    style.width = pageSize.width + 'pt'
    style.height = pageSize.height + 'pt'
  }
  return style
}

//通过配置的url数据
const dataUrl = ref('')

//iframe的src
const src = computed(() => {
  if (props.url) return props.url
  else if (props.baseData) return 'data:application/pdf;base64,' + props.baseData
  else if (dataUrl.value) return dataUrl.value
  else return ''
})

effect(() => {
  if (props.pdfDoc) {
    getPdfDataUrl(props.pdfDoc, props.usePdfFont).then((url) => {
      dataUrl.value = url
    }).catch((error) => {
      ElMessage.error('加载出错', error)
    })
  }
})
</script>

<template>
  <div v-loading="!src" :style="getStyle()">
    <iframe v-if="src" class="d-common-full" :src="src" />
  </div>
</template>

<style scoped>
</style>